<div class="alignleft">
	<h2>Program Head Office</h2>
	<table class="item-list" id="program-ho" width="400px">
		<thead>
			<tr>
				<th width="24px"><input type="checkbox"></th>
				<th>Nama Program</th>
				<!-- <th>Action</th> -->
			</tr>
		</thead>
		<tbody>

		</tbody>
	</table>
</div>


<div class="alignleft">
	<h2>Program Cluster</h2>
	<table class="item-list" id="program-cluster" width="400px">
		<thead>
			<tr>
				<th width="24px"><input type="checkbox" ></th>
				<th>Nama Program</th>
				<!-- <th>Action</th> -->
			</tr>
		</thead>
		<tbody>

		</tbody>

		<tfoot>
			<tr>
				<td colspan="2"><a class="link-table-1 cluster" >Add New Cluster's Program</a></td>
			</tr>
		</tfoot>
	</table>
</div>

<div id="dialog-add-program" title="Buat/Update Program">
	<?=form_open(); ?>
		<table>
			<tr>
				<td>Nama Program</td>
				<td><input name="program_name" id="caption" /></td>
			</tr>
			<tr>
				<td>Keterangan</td>
				<td><textarea name="program_description" id="description"></textarea></td>
			</tr>
			<tr>
				<td>Aktif</td>
				<td><!-- <input name="program-expire" /> --><input type="checkbox" name="active" id="status"></td>
			</tr>
		</table>
	<?=form_close(); ?>
</div>


<script type="text/javascript">
	var programs = jQuery.parseJSON('<?php echo json_encode($program)?>');
	var active_programs = jQuery.parseJSON('<?php echo json_encode($agent_programs)?>');
	var x=0;
	$(document).ready(function(){
		$.each(programs, function(key, value) {
			// alert("yaddi");
			// $("#program-cluster").next().text(key);
			prog =	"<tr>"+
					"<td><input type='checkbox' name='program_id[]' id='program_"+value['program_id']+"' value='"+value['program_id']+"' class='_a'></td>"+
					"<td><label for='program_"+value['program_id']+"'>"+value['caption']+"</label> </td>"+
					// "<td>"+value['description']+"</td>"+
					"</tr>";
			if(value["territory_id"] == 1) {
				$("#program-ho tbody").append(prog);
			}
			else {
				$("#program-cluster tbody").append(prog);
			}
		});

		$.each(active_programs, function(key, val) {
			$("#program_"+val['program_id']).attr('checked', 'checked');
		});

		$('.cluster').click(function(){
			$( "#dialog-add-program" ).dialog("open");
		});

			// var active = $('#statused').val();
		$( "#dialog-add-program" ).dialog({ 
			autoOpen: false, modal: true,
			buttons: {
				"Simpan": function() {
					var program_name = $('#caption').val();
					var program_description = $('textarea#description').val();
					$.ajax({
						type: "POST",
						url: '<?=base_url()?>index.php/master/addProgram/2',
						data: {caption:program_name , description:program_description},
						success: function(data){
							appendNewProgram(data, program_name);
							$( "#dialog-add-program" ).dialog( "close" );
						}
					});

				},
				"Cancel": function() {
					$( this ).dialog( "close" );
				}
			}
		});

	}); // end of document ready function

	function appendNewProgram (id_program, caption) {
		new_prog =	"<tr>"+
				"<td><input type='checkbox' name='program_id[]' id='program_"+id_program+"' value='"+id_program+"'></td>"+
				"<td><label for='program_"+id_program+"'>"+caption+"</label> </td>"+
				// "<td>"+value['description']+"</td>"+
				"</tr>";
		$("#program-cluster tbody").append(new_prog);
	}
</script>